import 'package:flutter/material.dart';

class TextSizePage extends StatefulWidget {
  @override
  _TextSizePageState createState() => _TextSizePageState();
}

class _TextSizePageState extends State<TextSizePage> {
  double textScaleFactor = 1;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance.window).copyWith(
        textScaleFactor: textScaleFactor,
      ),
      child: Scaffold(
        appBar: AppBar(title: Text('text size page')),
        body: Stack(
          children: <Widget>[
            Container(
              color: Colors.blueGrey,
              margin: EdgeInsets.all(20),
              child: Text(textContent, style: TextStyle(color: Colors.black)),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: EdgeInsets.only(bottom: 50),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    FlatButton(
                      onPressed: () {
                        if (textScaleFactor > 1) {
                          setState(() {
                            textScaleFactor--;
                          });
                        }
                      },
                      color: Colors.redAccent,
                      child: Text('-'),
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    FlatButton(
                      onPressed: () {
                        setState(() {
                          textScaleFactor++;
                        });
                      },
                      color: Colors.greenAccent,
                      child: Text('+'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

const textContent =
    'Today I was amazed to see the usually positive and friendly VueJS community descend into a bitter war. Two weeks ago Vue creator Evan You released a Request for Comment (RFC) for a new function-based way of writing Vue components in the upcoming Vue 3.0. Today a critical '
    'Reddit thread followed by similarly '
    'critical comments in a Hacker News thread caused a '
    'flood of developers to flock to the original RFC to '
    'voice their outrage, some of which were borderline abusive. '
    'It was claimed in various places that';
